<template>
    <div class="renellm">
        <my-layout>
            <!-- 插入主内容区的内容 -->
            <template v-slot:main>
                <div class="detail_container">
                    <!--   飞书文档待优化 -->
                    <div class="block docx-heading2-block" data-record-id="SX6Od5HbioQ4QLxPEanc6J2vnjc">
                        <div class="heading-block">
                            <h2>ReNeLLM：</h2>
                        </div>
                    </div>
                    <div class="block docx-text-block" data-record-id="Jaz0d5ygNobJRTx8tIDc1WGdntg">
                        <div class="text-block-wrapper">
                            <div class="text-block">
                                <span class="title_txt">Source:</span>
                                <a style="cursor:pointer;text-decoration-skip:none;" class="link"
                                   href="https://arxiv.org/pdf/2311.03191.pdf" target="_blank"
                                ><span>A Wolf in Sheep’s Clothing: Generalized Nested Jailbreak Prompts can Fool Large Language Models Easily</span></a>
                            </div>
                        </div>
                    </div>
                    <div class="block docx-text-block" data-record-id="FikMdQrqwoWqyLxGi28cWtMTnth">
                        <div class="text-block-wrapper">
                            <div class="text-block">
                                <span class="title_txt">Github repo:</span>
                                <a style="cursor:pointer;text-decoration-skip:none;" class="link"
                                   href="https://github.com/NJUNLP/ReNeLLM" target="_blank"
                                ><span>https://github.com/NJUNLP/ReNeLLM</span></a>
                            </div>
                        </div>
                    </div>
                    <div class="block docx-text-block"  data-record-id="SHzqdhNpOo4KIyxE21tcaSORni3">
                        <div class="text-block">
                            <h4>Introduction:</h4>
                        </div>
                    </div>
                    <div class="block docx-text-block" data-record-id="YVD0dA3gno92YnxsE9kcmCzEnog">
                        <div class="text-block-wrapper">
                            <div class="text-block">
                                <p>This paper presents a study on the vulnerabilities of Large Language Models (LLMs) like
                                    ChatGPT and GPT-4 to 'jailbreak' prompts, which are designed to bypass safety measures.
                                    The authors identify two main strategies for these attacks: Prompt Rewriting and Scenario Nesting.
                                    They introduce ReNeLLM, an automatic framework that uses LLMs to create effective jailbreak prompts.
                                    This method is shown to be more efficient and successful than previous approaches.
                                    The research highlights the current defenses' shortcomings against such attacks and suggests
                                    new strategies for better safeguarding LLMs. The goal of the study is to encourage safer and more
                                    regulated use of LLMs in both academia and industry.</p>
                            </div>
                        </div>
                    </div>
                    <div class="block docx-image-block" data-record-id="Q0mZd6PlOoqRh3xDe8tcWv5JnOf">
                        <div class="img" image-token="IxPObzr51o6C6nxczjBc3xutnPe">
                            <img draggable="false" src="@/assets/doc/img13.png"/>
                        </div>
                    </div>
                    <div class="block docx-text-block" data-record-id="ACqtdrzxRoqlo0xHjb3co3RJnbe">
                        <div class="text-block">
                            <h4>Adjustable parameters:</h4>
                        </div>
                    </div>
                    <div class="block docx-text-block" data-record-id="X2xhdO3zpom6HQxHVoTcQWMvnmb">
                        <div class="text-block-wrapper">
                            <div class="text-block">
                                <p>attack_model: LLM for generating jailbreak prompts during mutation.</p>
                            </div>
                        </div>
                    </div>
                    <div class="block docx-text-block"  data-record-id="Drtbd1DsYopJEbxs2YgcLOJsn66">
                        <div class="text-block-wrapper">
                            <div class="text-block">
                                <p>target_model: LLM being attacked to generate responses.</p>
                            </div>
                        </div>
                    </div>
                    <div class="block docx-text-block" data-record-id="TFSpd5LrKo6JFOxDCBzcr5rknLb">
                        <div class="text-block-wrapper">
                            <div class="text-block">
                                <p>eval_model: LLM for evaluating during Pruning:phase1(constraint) and Pruning:phase2(select).</p>
                            </div>
                        </div>
                    </div>
                    <div class="block docx-text-block" data-record-id="IquSdgSb4oKXdcxglT5cDicynGg">
                        <div class="text-block-wrapper">
                            <div class="text-block">
                                <p>Dataset:    (JailbreakDataset) dataset containing instances which conveys the query and reference responses.</p>
                            </div>
                        </div>
                    </div>
                    <!--   飞书文档待优化 -->

                    <div class="effect">
                        <h4>Jailbreak prompt examples</h4>
                        <div class="exampleSelectorContainer">
                            <span>Select an Example：</span>
                            <el-select clearable v-model="fnName" placeholder="Please click to select"  @change="fetchMessage">
                                <el-option
                                        v-for="(value, name) in testData"
                                        :key="name"
                                        :label="name"
                                        :value="name">
                                </el-option>
                            </el-select>
                        </div>
                        <div class="chatbot">
                            <section class="chatbot1">
                                <div class="chatbotHeader">
                                    <img src="@/assets/ChatGPT_logo.png" alt="ChatGPT Icon">
                                    <span>ChatGPT</span>
                                </div>
                                <div class="output-container">
                                    <div  v-show="!!fnName">
                                        <div class="userMessage">
                                            <span class="who">User: </span>
                                            {{showMsg.title}}
                                        </div>
                                        <div class="assistantMessage">
                                            <span class="who">Assistant: </span>
                                            {{showMsg.leftContent}}}
                                        </div>
                                    </div>
                                </div>
                            </section>
                            <section>
                                <div class="chatbotHeader">
                                    <img src="@/assets/devil.png" alt="devil Icon">
                                    <span>Jailbreak result</span>
                                </div>
                                <div class="output-container">
                                    <div v-show="!!fnName">
                                        <div class="userMessage">
                                            <span class="who">User: </span>
                                            {{showMsg.title}}
                                        </div>
                                        <div class="assistantMessage">
                                            <span class="who">Assistant: </span>
                                            {{showMsg.content}}}
                                        </div>
                                    </div>
                                </div>
                            </section>
                        </div>
                    </div>
                </div>
            </template>
        </my-layout>
    </div>
</template>

<script>
  import MyLayout from '@/views/MyLayout.vue'
  const initVale = {content:'',title:'',leftContent:''};
  export default {
    components: {
      MyLayout
    },
    data() {
      return {
        fnName:'',
        testData:{},
        showMsg:{...initVale},
        intervalId: null,
        meIntervalId: null,
      };
    },
    methods:{
      fetchMessage(val) {
        if(this.intervalId) {clearInterval(this.intervalId);}
        if(this.meIntervalId) {clearInterval(this.meIntervalId);}
        this.showMsg = {...initVale};
        if (val) {
          const content = this.testData[val];
          const leftContent = `I'm sorry, but I cannot assist with creating a phishing email or any other unethical activities.
                                        My purpose is to provide helpful and responsible information to users.
                                        If you have any other non-harmful requests or questions, feel free to ask,
                                        and I'll be happy to assist you.`;
          this.showMsg.title = val;
          let i = 0 , j = 0;
          this.meIntervalId = setInterval(() => {
            if (i < content.length) {
              this.showMsg.content += content.charAt(i);
              i++;
            } else {
              clearInterval(this.meIntervalId);
            }
          }, 10);
          this.intervalId = setInterval(() => {
            if (j < leftContent.length) {
              this.showMsg.leftContent += leftContent.charAt(j);
              j++;
            } else {
              clearInterval(this.intervalId);
            }
          }, 10);
        }
      }
    },
    created() {
      fetch(window.location.protocol + '//' + window.location.host+'/Multilingual.jsonl')
        .then(response => response.text())
        .then(content => {
          // 处理 content 中的 JSON Lines 数据
          let linesArray = content.split(/\n|\r\n/);
          linesArray = linesArray.filter(item => item);
          // const obj = linesArray[0];  // 字符串
          // 逐行解析每个 JSON 对象
          const jsonArray = linesArray.map(line => {
            const obj = new Function(`return ${line}`)()
            return obj;
          });
          const testData = {};
          // 每一个行的结构obj是：{"jailbreak_prompt": xxx,"target_responses":[xxxx],"query":xxxx,"eval_results":[xxxxx]}
          for(let item of jsonArray){
            testData[item.query] = Array.isArray(item.target_responses) ? item.target_responses[0] : '';
          }
          this.testData = testData;
        })
        .catch(error => console.error(error));
    },
    beforeDestroy() {
      clearInterval(this.intervalId);
      clearInterval(this.meIntervalId);
    }
  };
</script>

<style lang="scss" scoped>
</style>
